<script setup lang="ts">
const props = defineProps<{
  tableData: Array<any>
}>()
</script>
<template>
  <div class="table-box">
    <table>
      <tr class="colorTd">
        <td>ID</td>
        <td>{{ props.tableData[0].id }}</td>
      </tr>
      <tr>
        <td>国家</td>
        <td>{{ props.tableData[0].country }}</td>
      </tr>
      <tr class="colorTd">
        <td>星级</td>
        <td>{{ props.tableData[0].star }}</td>
      </tr>
      <tr>
        <td>框架级别</td>
        <td>{{ props.tableData[0].frameworkLevel }}</td>
      </tr>
      <tr class="colorTd">
        <td>姓名</td>
        <td>{{ props.tableData[0].name }}</td>
      </tr>
    </table>
  </div>
</template>
<style lang="scss" scoped>
.table-box {
  width: 100%;
  height: calc(300px - 47px);
  display: flex;
  align-items: center;
  justify-content: center; /* 可选 */
  table {
    width: 90%;
    color: white;
    font-size: 12px;
    td {
      border: 1px solid #ccc;
      width: 50%;
      text-align: center;
      padding: 12px;
      border: none;
    }
    .colorTd {
      background-color: #0d1947;
    }
  }
}
</style>
